<template>
    <section class="become-member-box px" v-if="isShow">
      <div class="content absolute-center">
        <p class="close-btn pa">
          <i class="inline-block" @click="handleClose"></i>
        </p>
        <p class="to-look-btn text-c pa">
          <span class="inline-block text-c fs15" @click="handleSub">点击领取</span>
        </p>
      </div>
    </section>
</template>

<script type="text/ecmascript-6">
  export default {
    data() {
      return {

      }
    },
    props:['isShow'],
    methods: {
      handleClose(){
        this.$emit('closeWin')
        console.log('closeWin--');
      },
      handleSub(){
        this.$emit('toLook')
        console.log('toLook--');
      }
    },
  }
</script>

<style scoped lang="scss">
  @import '../assets/css/base.scss';

  .become-member-box{
    top:0;
    left:0;
    background: rgba(0,0,0,.5);
    width: 100%;
    height: 100%;
    z-index:200;

    .content{
      top: 38%;
      background: url('../assets/img/img_become_vip.png') no-repeat top
      left;
      background-size: 100% 100%;
      width: 336px;
      height: 348px;

      p.close-btn{
        top: 25%;
        right: 0;
        height: 24px;
        padding-right:21px;
        box-sizing: border-box;

        i{
          width: 24px;
          height: 24px;
        }
      }

      p.to-look-btn{
        bottom: 8%;
        left: 0;
        width: 100%;
        padding:0 58px;
        box-sizing: border-box;

        span{
          background-color: #ECD19F;
          width: 100%;
          height: 40px;
          border-radius: 22px;
          color: #383942;
          line-height: 40px;
        }
      }
    }
  }
</style>
